<template>
    <div id="nav">
        <div class="my-navbar">
            <div class="my-navbar-content">
                <div class="my-navbar-logo">
                    <a href="/"><img
                            :src="webInfo.webSiteInfo.logoUrl">&nbsp;{{webInfo.webSiteInfo.name}}</a>
                </div>
                <div class="my-navbar-menu">
                    <el-menu :default-active="activeIndex" class="el-menu-demo" background-color="#336699"
                             mode="horizontal"
                             @select="handleSelect">
                        <!--开始导航栏的菜单的循环-->
                        <template v-for="(menu,index) in webInfo.navMenuViewList">
                            <el-menu-item v-if="menu.hasChild=='0'" :index="(index+1)+''"><a
                                    :href="menu.url">{{menu.name}}</a></el-menu-item>

                            <el-submenu class="my-navbar-menu-submenu" v-if="menu.hasChild=='1'" :index="(index+1)+''">
                                <template slot="title">{{menu.name}}</template>
                                <el-menu-item class="my-navbar-menu-subitem" v-for="(sub,index2) in menu.subMenus"
                                              :index="(index2+1)+''" :key="index2"><a :href="sub.link"><i
                                        :class="sub.icon"></i>{{sub.name}}</a></el-menu-item>
                            </el-submenu>
                        </template>
                    </el-menu>
                </div>

                <div class="my-navbar-avatar">
                    <!---如果用户没有登录，显示登录和注册的导航栏-->
                    <!---暂时还没写呢？--->
                    <div v-show="!isLogin">
                        <a href="/pLogin">登录</a>&nbsp;&nbsp; |&nbsp;&nbsp;
                        <a href="/pLogin">注册</a>
                    </div>

                    <!--如果用户已经登录则显示下面的菜单-->
                    <el-menu v-show="isLogin" class="el-menu-demo" background-color="#336699" mode="horizontal">
                        <el-submenu index="1">
                            <template slot="title">
                                <el-avatar :size="28"
                                           src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>&nbsp;<span
                                    class="username-avatar" v-if="$store.state.currentLoginUserInfo!=null">{{$store.state.currentLoginUserInfo.username.substr(0,6)}}</span>
                            </template>
                            <el-menu-item class="my-navbar-menu-subitem" index="2-1"><a href="#"><i
                                    class="el-icon-info"></i>个人中心</a></el-menu-item>
                            <el-menu-item v-if="isAdmin" class="my-navbar-menu-subitem" index="2-2"><a
                                    href="/pPostArticle"><i
                                    class="el-icon-edit-outline"></i>发表博文</a>
                            </el-menu-item>
                            <el-menu-item class="my-navbar-menu-subitem" index="2-3"><a href="#"><i
                                    class="el-icon-date"></i>我的收藏</a></el-menu-item>
                            <el-menu-item class="my-navbar-menu-subitem" index="2-3"><a href="#" @click="doLogout"><i
                                    class="el-icon-back"></i>注&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</a></el-menu-item>
                        </el-submenu>
                    </el-menu>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    /*
    //引入ElementUI的类库,使用局部引入方式
    import Vue from 'vue';
    //引入所需的组件
    import {Menu, Submenu, MenuItem, MenuItemGroup, Avatar, Message, MessageBox} from 'element-ui';
    //引入组件的样式表
    import 'element-ui/lib/theme-chalk/index.css';
    //使用选中的组件
    Vue.use(Menu);
    Vue.use(Submenu);
    Vue.use(MenuItem);
    Vue.use(MenuItemGroup);
    Vue.use(Avatar);
    */
    //使用axios组件
    import request from "@/util/request";

    export default {
        name: "MyNavBar",
        data() {
            return {
                activeIndex: '1',
                //网站信息对象，这个对象当中包含了导航栏菜单，友情链接菜单。
                webInfo: {
                    webSiteInfo: {
                        logoUrl: ''
                    },
                    navMenuViewList: []
                },
                isLogin: false,
                isAdmin: false //默认不是管理员
            };
        },

        mounted() {
            //初始化网站资料
            if (this.$store.state.webSiteData) {
                console.log('网站资料已经初始化....');
                //console.log(this.$store.state.webSiteData);
                this.webInfo = this.$store.state.webSiteData;
            } else {
                console.log('网站资料未始化....');
                this.initWebSiteInfo();
            }

            //判断登录状态;
            if (this.$store.state.currentLoginStatusData) {
                console.log('登录状态已经初始化....');
                console.log(this.$store.state.currentLoginStatusData);
                this.isLogin = this.$store.state.currentLoginStatusData;
            } else {
                console.log('登录状态未始化....');
                this.checkIsLogin();
            }

            //判断是否是管理员
            if (this.$store.state.currentIsAdminStatusData) {
                console.log('是否是管理员状态已经初始化....');
                //console.log(this.$store.state.currentLoginStatusData);
                this.isAdmin = this.$store.state.currentIsAdminStatusData;
            } else {
                console.log('是否是管理员状态未始化....');
                this.checkIsAdmin();
            }
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            //初始化网站信息的方法

            initWebSiteInfo() {
                console.log('执行initWebSiteInfo()....');
                request.get('/blog/site/info').then(resp => {
                    if (resp.data.code === 200) {
                        this.$store.dispatch('actionSetWebSiteData', resp.data.data);
                        this.webInfo = this.$store.state.webSiteData;
                        //this.webInfo = resp.data.data;
                    }
                }).catch(err => {
                    console.log(err);
                })
            },

            //检测是否已经登录
            checkIsLogin() {
                request.get('/commons/users/isLogin').then(resp => {
                    if (resp.data.code === 200) {
                        this.$store.dispatch('actionSetCurrentLoginStatusData', resp.data.data);
                        this.isLogin = this.$store.state.currentLoginStatusData;
                        console.log("是否登录：" + this.isLogin);
                    }
                }).catch(err => {
                    console.log(err);
                })
            },

            //检查是否是管理员
            checkIsAdmin() {
                request.get('/commons/users/isAdmin').then(resp => {
                    if (resp.data.code === 200) {
                        this.$store.dispatch('actionSetCurrentIsAdminStatusData', resp.data.data);
                        this.isAdmin = this.$store.state.currentIsAdminStatusData;
                        console.log("是否是管理员：" + this.isAdmin);
                    }
                }).catch(err => {
                    console.log(err);
                })
            },

            //执行用户注销
            doLogout() {
                this.$store.dispatch("Logout").then(resp => {
                    if (resp.data.code === 200) {
                        this.$message.success('注销成功');
                        setTimeout("javascript:window.location.href='/pLogin'", 2000);
                    }
                }).catch(err => {
                    console.log(err);
                })
            }
        }

    }
</script>

<style scoped>
    /*导航栏固定在页面顶部,外面必须套一个容器*/
    #nav {
        width: 100%;
        height: 60px;
    }

    .my-navbar {
        width: 100%;
        text-align: center;
        background: #336699;
        /*导航栏固定在页面顶部*/
        top: 0;
        left: 0;
        z-index: 200; /*这个值不要设置太大，否则会遮盖messagebox*/
        position: fixed;
    }

    .my-navbar-content {
        width: 80%;
        margin: 0px auto;
        background: #336699;
        display: flex;

    }

    .my-navbar-logo {
        width: 15%;
        height: 61px;
        line-height: 60px;
    }

    .my-navbar-menu {
        width: 60%;
        height: 61px;
        line-height: 60px;
        text-align: center;
    }

    .my-navbar-avatar {
        width: 25%;
        height: 61px;
        line-height: 61px;
        text-align: end;
        display: flex;
    }

    .my-navbar-avatar a, .my-navbar-avatar div {
        color: #fff;
        text-decoration: none;
        font-size: 10pt;
    }

    .my-navbar-logo a {
        width: 100%;
        height: 30px;
        line-height: 30px;
        color: #FFF;
        text-decoration: none;
        font-size: 14pt;
    }

    .my-navbar-logo a img {
        vertical-align: middle;
    }

    .el-menu-item {
        color: #FFF;
    }

    .el-menu-item, .el-submenu {
        width: 100px;
    }


    .my-navbar-menu-subitem {
        width: 100%;
        text-align: center;
    }

    .el-menu li {
        color: #FFF;
    }

    .el-menu-item a:hover {
        color: #fff;
    }

    .el-menu-item.is-active {
        color: #FFF;
        background: #336699;
    }

    .el-menu-item.is-active a {
        color: #FFF;
    }

    .el-menu-item a {
        color: #FFF;
    }

    .el-menu-item a {
        text-decoration: none;
    }

    .el-submenu div {
        color: #FFF !important;
    }

    /* 深选择器：如果相对设置了scoped的子组件里的元素进行控制可以使用'>>>'或者'deep'设置选中或悬浮的颜色*/
    .el-submenu /deep/ .el-submenu__title {
        color: #FFF !important;
    }

    .el-menu-item {
        color: #FFF !important;
    }

    .el-avatar {
        overflow: hidden;
    }

</style>